Customise a card#
Introduction#
Figure 1 is an example of a single default card. An individual card can be customised in different ways as explained below. But first, some explanation of the two types of cards, and the different components that can appear on a card.
Types of cards: information and navigation#
The Card Interface understands two types of card: information, and navigation. The following table summarises the major differences between the two types of cards. The type of card is determined by the type of its matching Blackboard item.
Card | Purpose | Blackboard Item |
Information | Display small bit of information | Content item |
Navigation | Provide a link to and display a small bit of information about another resource Can have numeric card labaels | Content Folder, Web link, Discussion board, Assessment item or any other Blackboard item that produces a link to another resource |
Figure 2 shows three cards. The first card is an Information card. The other two cards are Navigation cards.
The Information card does not have an engage button as there is nothing to engage with by clicking. It just provides a bit of descriptive text, which in this case talks about the purpose of this page.
The two Navigation cards have an engage button if the mouse is placed over these cards, then (as shown by the second card Figure 2) in the entire card will be surrounded by a blue border. Clicking on a Navigation card will take the visitor to the link pointed to by the card.
The components of a card#
Each card can be made up of many different components. Each component serves a different purpose and can be used to customise the card. Figure 3 shows a single card with labels identifying each of the major components. The following table provides more detail on each component.
Component | Description |
Image | A visual intended to help students connect/associate conceptually and emotionally with the item the card represents. Rather than an image this can be a single background colour. |
Date | Provides an indication to students as to when they should work on the item. Dates can be explicit (Oct 5) or they can be generic and based on the Griffith University calendar (e.g. Week 5) The date also has a Date Label that can be changed. In Figure 3 the date label is Commencing. |
Label | Identifies the type of object the card represents. For Figure 3 the card represents the fifth tutorial. The Card Interface automatically calculates the number. The default label is Module but change be changed. |
Title | Matches the Name of the Blackboard item. |
Description | The Text of the Blackboard item. |
Engage | Provides an additional visual affordance to the viewer that the card is something to be clicked on. The text for this button or whether there is a button can be customised for all cards on the current page. |
Adding an image#
There are two ways to add (or change) an image, by:
- Image URL (link).
- Image upload.
Image URL (link)
Pre-requisite: To use this approach you must know the URL (link) for the image. For example, the URL - https://djon.es/images/GrandCanyon.jpg is for a photo of the Grand Canyon.
You can use Google Images to search for relevant images, or use other images you find online by copying the image URL.
Think twice about using an image URL from the Blackboard content collection
This can cause problems when you copy the course for a new offering.
How to do it
- Edit the content item for the card you with to customise by adding an image.
- Paste the URL for your image after (and on the same line) as Card Image: (e.g. Figure 4)
- Save your changes.
When you view the page, the card should now be displaying the image from the URL you provided (e.g. Figure 5).
Troubleshooting: My card image doesn’t appear
To double check that you have the correct URL for the image, open up a new browser window and paste the image URL into browser location. As a result, your browser should open and display the image.
If it doesn’t then your image URL is incorrect.
Image upload
If you have a digital copy of the image, but don’t have or would prefer not to use a URL then you can upload the image into the Blackboard item.
How to do it
- Make sure you have a copy of the image on your computer.
- Edit the content item for your card.
- Use these instructions to embed an image in the content item and ensure that the Image Description is Card Image.
It is suggested you embed the image at the bottom of the content item to make it easy to edit the other content.
Figure 6 shows the same content item as Figure 4, but in this case the image is being uploaded into Blackboard. This content item will produce a card that looks exactly the same as Figure 5.
Adding an “active” image#
As shown in Figure 3, one of the possible card components is a date or date range. Suggesting that the information contained by the card is particularly relevant for that date or date range.
To reinforce the association between the card and a date it is possible to specify an active image for a card. Normally, the card will display the card image specified in previous sections. If there is an active image specified, the active image will be shown instead when the card is “active”. i.e. when viewed during its specified date or date range.
Note: the date and time a card is being viewed is calculated by the web browser and computer used to view the web page. Hence the current time and date is based on that of the viewer.
Given timezones, someone viewing a card from Brisbane may see a different active image than someone viewing the same card from London.
For example
The following figure (Figure 7) shows a card that has been configured with an active image. Done using the Card Image Active: line. The date for this card has been set to January 12. The card will be “active” when viewed on January 12.
Figure - A Card content item with a "Card Image Active" defined
The next two figures are views of this card taken on different days. Figure 8 is what the card looked like on January 11. On January 11, the Card Image was shown. Figure 9 is what the card looked like on January 12. On January 12, the Card Image Active was shown.
Possible dates and date ranges
The Card Interface supports three different types of dates or date ranges. The following table summarises these possibilities and how they work with the active image.
Type of date | Example | When is the active image displayed? |
Specific date | January 12 | Between 12am and 11:59pm on January 12 |
Griffith University Trimester Week | Week 5 | Between 12am Monday and 11:59pm Sunday of the week matching week 5 of Griffith trimester for the course site. |
Date range | Jan 12-Jan 14 | Between 12am January 12 and 11:59pm January 14 |
Date range (Griffith) | Week 2-Week 4 | Between 12am Monday Week 2 and 11:59pm Sunday of Week 4 |
Changing how the image fits the card#
Not all (or perhaps even many) images will fit neatly into the image space on a card. Some images will be too big. Some too small. Some will have the wrong aspect ratio. For example,
Figure 10 shows an image that has been cut off because it is too wide.
There are three options you can use to change how the image fits the card
- Cover (the default);
- contain; and,
- manually resize the image.
Cover – the default
By default (you don’t need to do anything for this to happen) the card makes the image "cover" the available space. That is, it scales the width and height of the image to ensure there is no unfilled space.
If the image aspect ratio is wrong you end up with the problem shown in
Figure 10. Some part of the image extends beyond the available space and is invisible (it is cropped).
Contain
As an alternative, you can tell the Card Interface to "contain" the image. That is, scale the image height and width so that it fits entirely within the space without cropping or stretching. For example, Figure 11.
With some images, containing an image will result in an image that is too narrow to take up the full width of a card. When this happens, the image will be centered as shown in Figure 12
How to do it – contain
To specify that an image should be contained, add the following to the relevant content item.
Card Image Size: contain
Figure 13 shows an item with this added and how it changes the image. Compare Figure 13 with the same card shown in Figure 5.
Manually resize the image
If neither cover nor contain provide a suitable method, you can always manually resize or crop the image to produce an appropriate aspect ratio and size.
To do this you will need to use an external tool such as PhotoShop, Paint3D, or one of the free online services.
Using a background colour#
If you do not want to use an image you can just not specify anything after Card Image: As shown in Figure 1, when there is no image the image space is left white.
If you would like to change the background colour, add a valid HTML colour name, a colour hex code, or rgb function after Card Image: For example, Figure 14 shows a card with a red background colour.
There are many HTML colour pickers on the Web that can help you choose a colour.
Use a video, PowerPoint presentation etc. instead.#
You may prefer to use a YouTube video, PowerPoint presentation or other form of shareable web content. For example, Figure 15 shows a card with a YouTube video instead of a card image. The video can be played, expanded etc from within the card.
How to do it
- Copy the embed code for the video or other resource you want to use.
(e.g. here’s how to get the embed code for a YouTube video) - Edit the Blackboard item matching the card.
- Change Card Image: to Card Image Iframe:
- Use the View HTML button on the editor to paste the embed code next to Card Image Iframe:
For example, Figure 16 has highlighted the embed code for the YouTube video being pasted into the item for Figure 15.
Adding a date (or date range)#
Each card can had added to it a date or date range. Figure 17 - Three example card dates provides three different examples of how card dates might be displayed, including:
- A “University” date based on the week of a University semester.
e.g. the Overview card in Figure 17 includes Week 1 and the date Feb 25. Only Week 1 was provided in the card. Feb 25 was automatically calculated based on the particular study period in which this course site was being used. For this study period, Week 1 commenced on Feb 25.
Note: This works for the Griffith University schedule. - A specific date.
e.g. the Content Interface demo card in Figure 17 does not have a week specified. Instead, the actual date – Feb 14 was provided manually. - A date range.
e.g. the _Card interface docs _card in Figure 17 shows a date range. Starting March 11 and extending to March 25. A date range can be specified using either a University dates or a specific dates.
Date Label
Each of the cards in Figure 17 have different date labels – the text displayed in black at the top of the date, including:
- Commencing;
- Celebrating; and,
- From
Using specific dates
To add a date to a card similar to the last card in Figure 17, you add Card Date: Mar 11 as shown in Figure 18.
The format for the date is the month followed by the date. The month should be specified as a three-letter abbreviation (e.g. Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec).
Using Griffith University dates
Rather than specify an explicit date, it is possible to use Griffith University trimester weeks (as specified by Griffith’s academic calendars) to specify a date. For example, Figure 19 shows a content item where the card date is specified using Week 1. Meaning that the first day of Week 1 of the trimester (or study period) associated with the Blackboard course site will be used as the date.
The content item in Figure 19 is converted into the card shown in Figure 20. The Card Interface automatically translates Week 1 into the date for the first day of Week 1 in the appropriate trimester (Trimester 1, 2019). The Card Interface also adds the number of the week to the display to help students and staff.
Adding a date range
It is possible to specify a date range by providing the start and end dates. These data should be provided in either the
- Specific date format – e.g. Mar 11-Mar 15
Both dates must be specific using both the abbreviated month and date. Both dates separate by a dash. - Trimester week format – e.g. Week 3-5
Use the work Week followed by two numbers (from 1 through 12) separated by a dash.
Change the card date label
Figure 20 is using the default card date label – Commencing. As shown in Figure 17 it is possible to change the card date label. For example, Figure 21 shows a card with the card date label set to Finish by
To change the card label you add a line containing Card Date Label: followed by the new label you wish to use.
The card in Figure 21 is produced from the content item in Figure 22. Note the line that contains Card Date Label: Finish by
Changing the card label#
As shown in Figure 3, by default all cards have a label intended to indicate what type of information or object the card provides (information card) or pointing to (navigation card). A card label has two components:
- name; and
By default, the label name is Module, but it can be changed. - number.
By default, the label number if automatically incremented so that the second “module” card has the number 2.
Card label example
For example, the card interface in Figure 23 illustrates how labels can be used.
The first card – What’s next? – does not have a card label. Three of the cards have the label Module and are numbered sequentially from one to three. Two other cards have the label Personal Change.
Changing the card label
To change the card label, add a line to the description for the Blackboard item to include
Card Label: newLabelName
For example, the Blackboard item in Figure 24 is used to produce the Your steps toward becoming a master teacher card in Figure 23.
Removing the Card label
If you don’t wish to give a navigation card a label (e.g. the What’s next? card in Figure 23) you ensure that the Blackboard item contains an empty _Card label _line.
Card Label:
For example, the item shown in Figure 25 is used to produce the What’s next? card in Figure 23.
Changing the Card Number#
As shown above, a card label consists of a name and a number.
By default, the card number starts at 1 and increments for each card of a given label i.e. Module 1, Module 2, Module 3. The order of numbering is controlled by the order in which the items appear in the Blackboard page.
Change the order of items and you will change the numbering
Blackboard allows you to change the order of items. Changing the order of items will change the order of numbering. However, the numbering will always start at 1.
Reload the page after changing the order
Changing the order of items in Blackboard happens in the page. Meaning it does NOT change what you see in the card interface.
To see the changes, you will need to reload or refresh the Blackboard page.
Use “Card Number” to change the numbering
Figure 26 has been modified to change the numbering of the cards shown in Figure 23. Rather than starting at 1. The Module cards start at 55.
This was done by adding the following to the What does masterful teaching look like? Card
Card Number: 55
This sets the current card’s number to 55 and ensures that all subsequent cards with the same label are numbered incrementally from there (56, 57, 58…)
Hiding a card#
Sometimes you don’t want a card to appear. e.g. you don’t want students to access a quiz just yet. Since a card is just a different way to visualise a single Blackboard Content Item. You hide the card by hiding the Blackboard item, either by making it unavailable or using adaptive release.
Hiding a Blackboard item
If you hover your mouse over an item's name an arrow icon should appear. Click on it and you see the list of options (e.g. Figure 27).
To make an item unavailable to students, click on the Make Unavailable option.
Rather than manually make an item available or unavailable, you can use Adaptive Release. One of the other course options shown above (just under Make Unavailable). Adaptive Release can be used to automate availability. Make it available after a date, between two dates, available only to a particular group....and much more
What you will see in edit mode
With edit mode on you will still be able to see cards that you have hidden. A card that has been hidden will show a message. As shown in Figure 28.
Cards with adaptive release applied will currently NOT show any message.
What you and students will see when not in edit mode
With edit mode off you will see the cards closer to what students see.
Cards that are marked unavailable will not be shown.
Cards with adaptive release applied will not be shown, if you meet the adaptive release rules. For example, if an item is limited only to people in a group. You will only see the matching card if you are in the group.
Enabling “Review Status”#
“Review Status” is a Blackboard feature that allows students to make particular items as reviewed. It also enables teachers to view what items students have marked as reviewed.
“Review Status” is set per item in Blackboard – see these instructions. With “Review Status” on there are two possible states for an item:
- Mark Reviewed (Figure 29); and
Indicating that the student can mark this item as reviewed - Reviewed (Figure 30).
Indicating that the student has marked this item as reviewed.
The changes to the Card Interface shown in Figure 29 and Figure 30 are only visible when Edit Mode is off.
With Edit Mode on the Card will be displayed as per normal and the now visible content item will show Review has been enabled, as illustrated in Figure 31.